<template>
	<view>
		<view class="gui-margin-top">
			<gui-swiper :swiperItems="swiperItems" :width="750" :height="330"></gui-swiper>
		</view>

		<view class="gui-margin-top gui-bg-gray gui-padding">
			<gui-speaker :items="speakerMsgs" :vertical="true" @change="chang2" :current="0"
				styles="overflow:hidden; height:60rpx; line-height:60rpx; font-size:28rpx; color:#ED6A0C;">
				<text slot="icon" class="gui-block-text gui-icons demo-icon gui-color-orange"
					style="width:100rpx;">&#xe656;</text>
			</gui-speaker>
		</view>

		<view class="gui-margin-top gui-flex">
			<view class="gui-grids-items gui-flex1">
				<text class="gui-grids-icon gui-icons">&#xe624;</text>
				<text class="gui-grids-text">教练考试</text>
			</view>
			
			<view class="gui-grids-items gui-flex1">
				<text class="gui-grids-icon gui-icons">&#xe631;</text>
				<text class="gui-grids-text">扫码核销</text>
			</view>
		</view>
		
		<view class="gui-margin-top">
			<gui-product-list-index :products="products" @gotoInfo="gotoInfo"></gui-product-list-index>
		</view>
	</view>
</template>

<script>
	var img =
		"https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzNnx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60";
	export default {
		data() {
			return {
				products: [{
						"name": "小雪（球童）",
						"img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F02%2F20200502120831_kthmd.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712236756&t=0f7b442f58d17acdbb96d9d8a4da6536",
						"time": "08:00-12:00",
						"price": "40元/小时",
					},
					{
						"name": "小雪（球童）",
						"img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F02%2F20200502120831_kthmd.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712236756&t=0f7b442f58d17acdbb96d9d8a4da6536",
						"time": "08:00-12:00",
						"price": "40元/小时",
					},
					{
						"name": "小雪（球童）",
						"img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F02%2F20200502120831_kthmd.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712236756&t=0f7b442f58d17acdbb96d9d8a4da6536",
						"time": "08:00-12:00",
						"price": "40元/小时",
					}
				],
				speakerMsgs: [{
						title: "GraceUI 更快、更好的前端更好的前端更好的前端更好的前端UI",
						url: "../index/index",
						opentype: "navigate"
					},
					{
						title: "Hcoder.net - 精品 IT 课程中心",
						url: "../index/index",
						opentype: "switchTab"
					}
				],
				swiperItems: [{
						img: img,
						url: '',
						title: "测试标题 001",
						opentype: 'navigate'
					},
					{
						img: img,
						url: '',
						title: "测试标题 002",
						opentype: 'navigate'
					},
					{
						img: img,
						url: '',
						title: "测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
						opentype: 'navigate'
					},
				],
				swiperItems2: []
			}
		},
		methods: {
			chang2: function(e) {
				console.log(e);
			},
			swiperchange: function(e) {
				console.log(e);
			},
			taped: function(e) {
				uni.showToast({
					title: "您点击了第 " + e + " 个项目",
					icon: "none"
				});
			}
		},
		onLoad: function() {
			// 模拟api加载数据
			setTimeout(() => {
				this.swiperItems2 = [{
						img: img,
						url: '',
						title: "测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
						opentype: 'click'
					},
					{
						img: img,
						url: '',
						title: "测试标题04",
						opentype: 'click'
					},
					{
						img: img,
						url: '',
						title: "测试标题05",
						opentype: 'click'
					}
				]
			}, 1000)
		}
	}
</script>

<style>
	.demo-icon {
		width: 60rpx;
		line-height: 90rpx;
		font-size: 32rpx;
	}
</style>